import { defineComponent, reactive, ref } from "vue";
import styles from "./transactionRecords.module.less";
import HeaderUserCenter from "@/components/HeaderUserCenter/HeaderUserCenter";
import Footer from "@/components/Footer/Footer";
import { imgPath } from "@/common/utils";
import PaymentPopup from "./paymentPopup/paymentPopup";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
  setup() {

    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      payList: [
        {
          text: '通联支付',
          icon: imgPath('/userCenter/allInPay.png'),
        },
        {
          text: '支付宝',
          icon: imgPath('/userCenter/alipay.png'),
        },
        {
          text: '微信支付',
          icon: imgPath('/userCenter/WeChat.png'),
        },
      ],
      payment_options_actived: '',
      money: route.query.rechargeAmount,
    } as any)
    //选择支付方式
    const clickPayment = (index: number) => {
      state.payment_options_actived = index
    }
    //打开在线支付弹窗
    const ClickPaymentBtn = () => {
      if (state.payment_options_actived === 0) {
        router.push('')
      } else {
        paymentPopupRef.value.open({
          qrcode_id: state.payment_options_actived,
        })
      }
    }
    const Main = () => (
      <div class={styles.main}>
        <div class={styles['header-box']}>
          <p>订单已提交，请尽快支付！</p>
          <div class={styles['pay-information']}>
            <div>企业名称：宁波世纪美亚国际旅行社有限公司</div>
            <div>
              充值金额：<span class={styles['recharge-amounts']}>{state.money}</span>元
            </div>
          </div>
          <div class={styles['pay-totalAmount']}>
            <div>
              <span class={styles.label}>充值总额：</span>
              <span class={styles.value}>{state.money}元</span>
            </div>
            <div>
              <span class={styles.label}>在线支付</span>
            </div>
          </div>
        </div>
        <div class={styles['payment-options']}>
          {
            state.payList.map((item: any, index: number) => (
              <a-radio-group
                v-model:value={state.payment_options_actived}
                name="radioGroup"
              >
                <div class={styles['payment-options-item']} onClick={() => { clickPayment(index) }}>
                  <a-radio value={index}></a-radio>
                  <div class={styles['item-icon-box']}>
                    <img src={item.icon} />
                  </div>
                </div>
              </a-radio-group>
            ))
          }
        </div>
        <div class={styles['payment-btn-box']}>
          <div class={styles['payment-btn']} onClick={() => { ClickPaymentBtn() }}>立即付款</div>
        </div>
      </div>
    )
    const paymentPopupRef = ref(null as any)
    return () => (
      <div class={styles.transactionRecords}>
        <HeaderUserCenter />
        <Main />
        <Footer />
        <PaymentPopup ref={paymentPopupRef} />
      </div>
    )
  }
})

